<template>
  <div class="swipe" v-if="showDou">
    <div class="card" v-for="(i, index) in MovieData2" :key="i.id">
      <div class="img">
        <img :src="MovieData2[index].image" alt="" @click="togo(index)" v-if="MovieData2[index].image" />
        <van-loading v-else />
      </div>
      <div class="title" >{{ MovieData2[index].name }}</div>
      <div class="star">
        <van-rate
          readonly
          size="8"
          color="rgb(255,210,30)"
          :allow-half="true"
          v-model="MovieData2[index].hscore"
        />
        <span>{{MovieData2[index].score?MovieData2[index].score:'暂无'}}</span>
      </div>
    </div>
  </div>
  <div class="swipe" v-else>
    <div class="card" v-for="(i, index) in MovieData" :key="i.id">
      <div class="img">
        <img :src="MovieData[index].image" alt="" @click="togo(index)" v-if="MovieData[index].image" />
        <van-loading v-else />
      </div>
      <div class="title">{{ MovieData[index].name }}</div>
      <div class="star">
        <van-rate
          readonly
          size="8"
          color="rgb(255,210,30)"
          :allow-half="true"
          v-model="MovieData[index].hscore"
        />
        <span>{{MovieData[index].score?MovieData[index].score:'暂无'}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { getHotMovie,getHotMovie2 } from "../../../request/api";
import { useRouter } from 'vue-router'
export default {
  name: "Swipe",
  props:['showDou'],
  setup(props) {
    const router = useRouter();
    const togo = (index)=> {
      router.push({
        path:'/moviedetail',
        query:{
          index:index,
          showDou:props.showDou,
          MovieData:data.MovieData,
          MovieData2:data.MovieData2
        }
      })
    }
    let data = reactive({
      MovieData: [
        {
          id: 1,
          image: "",
          name: "",
          score: 0,
        },
      ],
      MovieData2 : [
        {
          id: 1,
          image: "",
          name: "",
          score: 0,
        }
      ]
    });
    const getMovie = async () => {
      const res = await getHotMovie();
      console.log(res.data);
      data.MovieData = res.data;
    };
    const getMovie2 = async ()=> {
      const res = await getHotMovie2();
      console.log(res.data);
      data.MovieData2 = res.data;
    }

    onMounted(() => {
      getMovie();
      getMovie2()
    });
    return {
      ...toRefs(data),
      togo
    };
  },
};
</script>

<style lang="less" scoped>
.swipe {
  width: 375px;
  height: 190px;
  display: flex;
  overflow-x: scroll;
  padding: 15px 10px;
  -webkit-scrollbar: none;
  padding-bottom: 10px;
  &::-webkit-scrollbar {
    display: none;
  }
  .card {
    width: 100px;
    height: 180px;
    margin-right: 15px;
    display: flex;
    flex-flow: column;
    .img {
      background: url();
      width: 100px;
      height: 140px;
      background-size: cover;
      flex-shrink: 0;
      border-radius: 5px;
      position: relative;
      img {
        width: 100px;
        height: 140px;
        border-radius: 5px;
      }
      .van-loading {
        position: absolute;
        left: 170px;
        top: 60px;
      }
    }
    .title {
      width: 100px;
      height: 23px;
      font-size: 13px;
      font-weight: 700;
      line-height: 23px;
      color: #191919;
      margin-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .star {
      width: 100px;
      height: 18px;
      span {
        font-size: 14px;
        margin-left: 4px;
        color: rgb(255, 210, 30);
      }
    }
  }
}
</style>